<template>
  <div class="container">
    <div class="logo">
      <img src="../../assets/images/startpage/mcloud-logo.png">
    </div>
    <div class="login">
      <div class="loginbytel">
        <router-link to="/login/tel">手机快捷登录</router-link>
      </div>
      <div class="loginbyuser">
        <router-link to="/login/user">账号密码登录</router-link>
      </div>
    </div>
    <div class="register">
      <router-link to="/register">立即注册</router-link>
    </div>
    <clientSide></clientSide>
  </div>
</template>
<script>
  import $ from 'jquery'

  import clientSide from '../subComponents/clientSide.vue'

  export default {
    data () {
      return {}
    },
    components: {
      clientSide
    },
    mounted () {
      $('.container').height($(window).height())
    }
  }
</script>
<style scoped>
  .container {
    width: 100%;
    background: url("../../assets/images/startpage/nav_bg.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    overflow: hidden;
  }

  .container > .logo {
    margin: 1.74rem auto 1.78rem;
  }

  .container > .logo img {
    width: 1.80rem;
    height: 1.81rem;
  }

  .container .login .loginbytel,.container .login .loginbyuser {
    width: 6.87rem;
    height: 0.9rem;
    border: 1px solid #fff;
    margin: 0 auto 0.4rem;
    border-radius: 0.9rem;
  }

  .container .login a {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 0.36rem;
    line-height: 0.9rem;
  }

  .container .register {
    margin: 0.72rem auto;
  }

  .container .register a{
    color: #6ffff6;
    font-size: 0.28rem;
    padding: 1px;
    border-bottom: 1px solid #6ffff6;
  }
</style>

